<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.hosname" placeholder="点击输入医院名称" />
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="searchObj.reserveDateBegin"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.reserveDateEnd"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()"
        >查询</el-button
      >
    </el-form>
  <!-- class="chart-container" -->
    <div class="div-left" style="width:100%; height:800px" >
      <div
        id="chart"
        ref="chart"
        class="chart"
        style="width: 100%; height: 420px"
      />
      <div style="margin-left:3px">
      <div
        id="chart3"
        ref="chart3"
        class="div-left"
        style="width: 490px; height: 390px"
      />
      <div
        id="chart4"
        ref="chart4"
        class="div-left"
        style="width: 490px; height: 390px;"
      />
      <!-- <div
        id="chart2"
        ref="chart2"
        class="div-left"
        style="width: 540px; height: 400px"
      /> -->
      <div class="div-left" style="width:370px; height:200px">
        <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">

        <h3 id="displayh3" style="margin-top:5px;" v-show="display">支付状态统计</h3>
          <v-tooltip :showTitle="false" dataKey="item*percent" />
          <v-axis />
          <v-legend dataKey="item" />
          <v-pie
            position="percent"
            color="item"
            :v-style="pieStyle"
            :label="labelConfig"
          />
          <v-coord type="theta" />
        </v-chart>
      </div>
      </div>
    </div>
  </div>
</template>
<style >
.div-left{float: left; margin:10px; margin-top: 10px;}
</style>
<script>
import echarts from "echarts";
import statisticsApi from "@/api/sta";

const DataSet = require("@antv/data-set");
const sourceData = [
  // { item: '事例一', count: 40 },
  // { item: '事例二', count: 21 },
  // { item: '事例三', count: 17 },
  // { item: '事例四', count: 13 },
  // { item: '事例五', count: 9 }
];
const scale = [
  {
    dataKey: "percent",
    min: 0,
    formatter: ".0%",
  },
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: "percent",
  field: "count",
  dimension: "item",
  as: "percent",
});
const data = dv.rows;
export default {
  data() {
    return {
      display:false,
      searchObj: {
        hosname: "",
        reserveDateBegin: "",
        reserveDateEnd: "",
      },

      searchObjs: {},

      btnDisabled: false,
      chart: null,
      title: "",
      xData: [], // x轴数据
      yData: [], // y轴数据
      listCount: [],

      data,
      scale,
      height: 400,
      pieStyle: {
        stroke: "#fff",
        lineWidth: 1,
      },
      labelConfig: [
        "percent",
        {
          formatter: (val, item) => {
            return item.point.item + ": " + val;
          },
        },
      ],
      // listCount: []
    };
  },
  methods: {
    // 初始化图表数据
    showChart() {
      this.setChartData2();
      this.setChartData3();
      this.setChartData4();
      statisticsApi.getCountMap(this.searchObj).then((response) => {
      this.yData = response.data.countList;
      this.xData = response.data.dateList;

      this.setChartData();
      this.display=true
      // console.log($("displayh3"))
      // $("displayh3").css("display","inline")
      });
    },

    setChartData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("chart"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.title + "挂号量统计",
        },
        tooltip: {},
        legend: {
          data: [this.title],
        },
        xAxis: {
          data: this.xData,
        },
        yAxis: {
          minInterval: 1,
        },
        series: [
          {
            name: this.title,
            type: "line",
            color:['#8e7cc3'],
            data: this.yData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

  async setChartData3() {
    await statisticsApi.getCountPl(this.searchObj).then((response) => {
        this.yData = response.data.countList2;
        this.xData = response.data.dateList2;
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("chart3"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.title + "未支付统计",
        },
        tooltip: {},
        legend: {
          data: [this.title],
        },
        xAxis: {
          data: this.xData,
        },
        yAxis: {
          minInterval: 1,
        },
        series: [
          {
            name: this.title,
            type: "bar",
            color:["#36cbcb",'#38a0ff'],
            data: this.yData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    async setChartData4() {
    await statisticsApi.getCountYPl(this.searchObj).then((response) => {
        this.yData = response.data.countList3;
        this.xData = response.data.dateList3;
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("chart4"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.title + "已支付统计",
        },
        tooltip: {},
        legend: {
          data: [this.title],
        },
        xAxis: {
          data: this.xData,
        },
        yAxis: {
          minInterval: 1,
        },
        series: [
          {
            name: this.title,
            type: "bar",
            //radius: '55%',
            color:['#38a0ff'],
            data: this.yData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },


    async setChartData2() {
      await statisticsApi.getCountList(this.searchObj).then((response) => {
        this.listCount = response.data.dataList;
      });
      const dv = new DataSet.View().source(this.listCount);
      dv.transform({
        type: "percent",
        field: "count",
        dimension: "item",
        as: "percent",
      });
      this.data = dv.rows;

      // var myChart = echarts.init(document.getElementById("chart2"));
      // var option = {
      //   title: {
      //     text: this.title + "订单状态统计",
      //   },
      //   tooltip: {},
      //   legend: {
      //     data: [this.title],
      //   },
      //   series: [
      //     {
      //       name: this.title,
      //       type: "pie",
      //       color: ['#38a0ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
      //       data: this.listCount,
      //     },
      //   ],
      // };
      // myChart.setOption(option);
    },
  },
};
</script>
